<script lang="ts" setup>
import { useAdminMyselfStore } from "../store/adminMyself"
import { computed } from "vue"

const { account } = useAdminMyselfStore()


const emailSuffix = ["@qq.com", "@163.com", "@gmail.com", "@outlook.com"]
const emailOptions = computed(() => {
  const emailPrefix = account.formData.email.split("@")[0]
  if (!emailPrefix) return []
  return emailSuffix.map((suffix) => emailPrefix + suffix)
})
</script>

<template>
  <t-row style="width: 100%;">
    <t-col :lg="5" :md="6" :sm="12" :xl="5" :xs="12">
      <t-space class="left_space" direction="vertical">
        <t-form :data="account.formData" label-align="right" label-width="70px">

          <t-form-item label="账号">
            <t-input v-model="account.formData.account" />
          </t-form-item>

          <t-form-item label="密码">
            <t-input v-model="account.formData.password" type="password"/>
          </t-form-item>

          <t-form-item label="邮箱">
            <t-auto-complete v-model="account.formData.email" :options="emailOptions" />
          </t-form-item>

        </t-form>
      </t-space>
    </t-col>
    <t-col :lg="7" :md="6" :sm="12" :xl="7" :xs="12" class="right">
      <img alt="" class="img" src="@/assets/images/pay_set.svg" />
    </t-col>
  </t-row>

</template>

<style lang="less" scoped>
.left_space {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 50%;
  }
}
</style>
